<template>
  <!-- 人员搜索 -->
  <el-select :disabled="disabled" :value="value" filterable remote clearable :remote-method="getSearch" @change="onChange" @clear="onClear" :placeholder="placeholder">
    <el-option v-for="(item,index) in userArray" :key="index" :value="item.memberId" :label="item.memberName+'（'+(item.memberSex==1?'男':'女')+'）'"></el-option>
    <br>
    <pager v-model="pager" small @change-pagenum="getData"></pager>
  </el-select>
</template>
<script>
export default {
  props: {
    value: [String, Number],
    keyword: {
      type: String,
      default: ""
    },
    disabled:{
      type:Boolean,
      default:false,
    },
    placeholder: {
      type: String,
      default: "请选择人员"
    }
  },
  data() {
    return {
      userArray: [],
      form: {
        memberName: ""
      },
      pager: { pageSize: 10, pageNum: 1, total: 0 }
    };
  },
  mounted() {
    let th = this;
  },
  methods: {
    getSearch(name) {
      const th = this;
      th.form.memberName = name;
      th.pager.pageNum = 1;
      th.getData();
    },
    getData() {
      let th = this;
      let j = {
        hpId: th.adminUser.hpId,
        status: 1
      };
      Object.assign(j, th.form, th.pager);
      th.$api.getMemberList(j).then(res => {
        if (res.executed) {
          th.userArray = res.dataBody.list;
          th.pager.total = res.dataBody.total;
        }
      });
    },
    onChange(value) {
      let th = this;
      th.$emit("input", value);
      th.$emit("change", value);
    },
    onClear() {
      let th = this;
      th.form.memberName = "";
      th.$emit("input", "");
      th.$emit("clear");
      th.getSearch();
    }
  },
  watch: {
    keyword: {
      immediate: true,
      handler: function(n, o) {
        let th = this;
        th.getSearch(n);
      }
    },
    value(n) {
      const th = this;
      if (n === "") {
        th.getSearch();
      }
    }
  }
};
</script>